<template>
  <div class="container_max">
    <!-- 核心画布 -->
    <VFlowGraph v-model:is-ready="isReady" />
    <template v-if="isReady">
      <!-- 顶部快捷工具 -->
      <TopToolBar />
      <!-- 流程图节点 -->
      <StencilTool />
      <!-- 节点属性 -->
      <ConfigPanel />
    </template>
  </div>
</template>

<script lang="ts">
import FoldBtn from './components/FoldBtn.vue'
import VFlowGraph from './components/VFlowGraph.vue'
import StencilTool from './components/StencilTool.vue'
import TopToolBar from './components/TopToolBar.vue'
import ConfigPanel from './components/ConfigPanel/index.vue'
import { ref, defineComponent } from 'vue'
export default defineComponent({
  name: 'Home',
  components: {
    FoldBtn,
    TopToolBar,
    StencilTool,
    ConfigPanel,
    VFlowGraph
  },
  setup() {
    const isReady = ref(false)
    return {
      isReady
    }
  }
})
</script>

<style lang="less" scoped>
.container_max {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
</style>
